<template>
    <div class="button">
        <el-button type="primary" plain :icon="Plus">新增</el-button>
        <el-button type="success" plain :icon="Edit">修改</el-button>
        <el-button type="danger" plain :icon="Delete">删除</el-button>
    </div>
    <!-- 1.待处理任务列表 -->
    <div class="table">
        <el-tag type="primary">待处理任务列表</el-tag>
        <el-table :data="tableData1" width="100%" style="margin-top: 10px;">
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="客户姓名" width="120" header-align="center" align="center" />
            <el-table-column property="phone" label="手机号码" width="120" header-align="center" align="center" />
            <el-table-column property="channelName" label="渠道名称" width="120" header-align="center" align="center" />
            <el-table-column property="activityName" label="活动名称" width="120" header-align="center" align="center" />
            <el-table-column property="courseName" label="课程名称" width="120" header-align="center" align="center" />
            <el-table-column property="contractPrice" label="合同金额" width="120" header-align="center" align="center" />
            <el-table-column label="操作" width="300" header-align="center" align="center">
                <template #default>
                    <el-button link type="primary" size="small" :icon="Pointer">
                        跟进
                    </el-button>
                    <el-button link type="primary" size="small" :icon="TopRight">分配</el-button>
                </template>
            </el-table-column>



        </el-table>
    </div>
    <!-- 2.已提交未审批任务列表 -->
    <div class="table">
        <el-tag type="success">已提交未审批任务列表</el-tag>
        <el-table :data="tableData2" width="100%" style="margin-top: 10px;">
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="客户姓名" width="120" header-align="center" align="center" />
            <el-table-column property="phone" label="手机号码" width="120" header-align="center" align="center" />
            <el-table-column property="channelName" label="渠道名称" width="120" header-align="center" align="center" />
            <el-table-column property="activityName" label="活动名称" width="120" header-align="center" align="center" />
            <el-table-column property="courseName" label="课程名称" width="120" header-align="center" align="center" />
            <el-table-column property="contractPrice" label="合同金额" width="120" header-align="center" align="center" />
            <!-- <el-table-column property="address" label="操作" width="300" header-align="center" align="center">
                <template #default>
                    <el-button link type="primary" size="small" :icon="Pointer">
                        跟进
                    </el-button>
                    <el-button link type="primary" size="small" :icon="TopRight">分配</el-button>
                </template>
            </el-table-column> -->



        </el-table>
    </div>
    <!-- 3.审批完成任务列表 -->
    <div class="table">
        <el-tag type="danger">审批完成任务列表</el-tag>
        <el-table :data="tableData3" width="100%" style="margin-top: 10px;">
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="客户姓名" width="120" header-align="center" align="center" />
            <el-table-column property="phone" label="手机号码" width="120" header-align="center" align="center" />
            <el-table-column property="channelName" label="渠道名称" width="120" header-align="center" align="center" />
            <el-table-column property="activityName" label="活动名称" width="120" header-align="center" align="center" />
            <el-table-column property="courseName" label="课程名称" width="120" header-align="center" align="center" />
            <el-table-column property="contractPrice" label="合同金额" width="120" header-align="center" align="center" />
            <el-table-column property="reason" label="备注信息" width="120" header-align="center" align="center" />

            <el-table-column property="address" label="操作" width="300" header-align="center" align="center">
                <template #default>
                    <el-button link type="primary" size="small" :icon="View" @click="lookup">
                        查看
                    </el-button>
                    <el-button link type="primary" size="small" :icon="Document">预览</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 合同详情查看 -->
    <el-dialog v-model="dialogVisible" title="合同详情" width="650">
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">合同编号</p>
                    <p style="color: gray;">{{ conId }}</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">客户手机号码</p>
                    <p style="color: gray;">{{ clientPhone }}</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">客户姓名</p>
                    <p style="color: gray;">{{ clientName }}</p>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">课程分类</p>
                    <p style="color: gray;" v-show="courseClass == 3">游泳类</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">课程名</p>
                    <p style="color: gray;">{{ cName }}</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">渠道名称</p>
                    <p style="color: gray;">{{ chaName }}</p>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">活动名称</p>
                    <p style="color: gray;">{{ acName }}</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">合同状态</p>
                    <p style="color: gray;" v-show="conStatus == 2">审批通过</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">合同金额</p>
                    <p style="color: gray;">{{ conPrice }}</p>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">课程价格</p>
                    <p style="color: gray;">{{ cPrice }}</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">折扣类型</p>
                    <p style="color: gray;" v-show="sale == 2">代金券</p>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <p style="font-style: italic;font-weight: bold;">合同审批人</p>
                    <p style="color: gray;">{{ conPerson }}</p>
                </div>
            </el-col>
        </el-row>

        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="dialogVisible = false">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { unProcess, Process, Processing, view } from '@/api/contract/contractapi';
import { Plus, Edit, Delete } from '@element-plus/icons-vue';
import { Pointer, TopRight, Document, View } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue';
// interface User {
//     date: string
//     name: string
//     address: string
// }
const tableData1: any = ref([]);
const tableData2: any = ref([]);
const tableData3: any = ref([]);

//合同id获取
const id = ref();
//三个列表的渲染
function getlist() {
    unProcess().then(res => {
        console.log(res);
        tableData1.value = res.rows

    });
    Process().then(res => {
        console.log(res);
        tableData2.value = res.rows
    });
    Processing().then(res => {
        console.log(res);
        tableData3.value = res.rows
        for (let i = 0; i < res.rows.length; i++) {
            id.value = res.rows[i].contractId
        }
        console.log(id.value);

    });
}
getlist();
const conId = ref();
const clientPhone = ref();
const clientName = ref();
const courseClass = ref();
const cName = ref();
const chaName = ref();

const conStatus = ref();
const acName = ref();
const conPrice = ref();

const cPrice = ref();
const sale = ref();
const conPerson = ref();
const dialogVisible = ref(false);
function lookup() {
    dialogVisible.value = true;
    view(id.value).then(res => {
        console.log(res);
        conId.value = res.data.contractId;
        clientPhone.value = res.data.phone;
        clientName.value = res.data.name;

        courseClass.value = res.data.courseId;
        cName.value = res.data.courseName;
        chaName.value = res.data.channelName;

        acName.value = res.data.activityName;
        conStatus.value = res.data.status;
        conPrice.value = res.data.contractPrice;

        cPrice.value = res.data.coursePrice;
        sale.value = res.data.type;
        conPerson.value = res.data.approveUserName;

    });
}
</script>

<style lang="scss" scoped>
.button,
.table {
    margin: 20px;
}

.table {
    width: 96%;

    .el-table-column {
        align: center;
    }
}
</style>